<template>
  <div id="container">
    <div id="app">
      <!-- 在使用组件是,在夹着的地方传入标签 -->
      <!-- 运行后,myslot配合slot位置标签显示页面上 -->
      <MySlot4>
        <template v-slot="scope">
          <a href="#">{{ scope.row.default2 }}</a>
        </template>
      </MySlot4>
    </div>
  </div>
</template>

<script>
import MySlot4 from "../components/MySlot4";
/* 
作用域插槽:
需求:我想替换slot位置为a标签,但是要使用的值是defaultObj里的default2

使用场景:使用插槽时,想要用组件内的变量

步骤 
slot身上添加属性和内部值
在使用组件 template配合 v-slot="变量名"

效果
scope变量收集对应slot身上的属性和值
*/
export default {
  components: {
    MySlot4,
  },
};
</script>

<style>
#app {
  width: 400px;
  margin: 20px auto;
  background-color: #fff;
  border: 4px solid blueviolet;
  border-radius: 1em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 1em 2em 2em;
}
</style>